<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">


        .b {
            color: #8787cb;
            margin: 0 5px;
        }


    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="table" style="margin-top: -12px;">
        <el-table v-loading="loading" element-loading-text="正在为您拼命加载中..." element-loading-spinner="el-icon-loading"
                  ref="multipleTable" @selection-change="handleSelectionChange" :close-on-click-modal="false"
                  :close-on-press-escape="false" element-loading-background="rgba(244, 81, 122, 0.8)"
                  :data="tableData" max-height="500" style="width: 100%">

            <el-table-column prop="multipleSelection" type="selection" width="75" align="center" >
            </el-table-column>

            <el-table-column prop="id" align="center" width="150" label="编号" v-if="false">
                <template slot-scope="scope">
                    <span class="id">{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sname" align="center" width="150" label="店铺">
                <template slot-scope="scope">
                    <span class="sname">{{scope.row.store.sname}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="storeGoods.id" align="center" width="150" label="商品编号" v-if="true">
                <template slot-scope="scope">
                    <span class="id">{{scope.row.storeGoods.id}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="img" align="center" width="120px" label="商品">
                <template slot-scope="scope">
                    <img :src="scope.row.storeGoods.img" class="img" style="width: 120px;height: 120px">
                </template>
            </el-table-column>
            <el-table-column prop="gname" align="center">
                <template slot-scope="scope">
                    <span class="gname">{{scope.row.storeGoods.gname}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sprice" label="单价" align="center">
                <template slot-scope="scope">
                    <span class="price">¥{{scope.row.storeGoods.sprice}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.num" oninput="value=value.replace(/[^\d]/g,'')"
                              autocomplete="off" style="width:140px" size="mini" @change="handleInput(scope.row)">
                        <el-button size="mini" slot="prepend" @click="del(scope.row)"><i
                                class="el-icon-minus"></i></el-button>
                        <el-button slot="append" size="mini" @click="add(scope.row)"><i
                                class="el-icon-plus"></i></el-button>
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column prop="count" label="小计" align="center">
                <template slot-scope="scope">
                    <span class="count">¥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-delete" style="font-size:18px;cursor: pointer;"
                       @click="deleteGoods(scope.row.id)"></i>
                </template>
            </el-table-column>

        </el-table>
    </div>


    <div>
        <el-row :gutter="20">
            <el-col :span="2">
                <el-button type="text" style="margin-top: 10px; color: #646464;"
                           class="text" @click="up()">
                    继续购物 | </el-button>
            </el-col>
            <el-col :span="15">
                <el-button type="text" style="margin-top: 10px; color: #646464; margin-left: -50px;"
                           class="grid-content bg-purple">
                    共<b class="b">{{tableData.length}}</b>件商品
                    ,已选择 <b class="b">{{multipleSelection.length}}</b> 件</el-button>

            </el-col>

            <el-col :span="2">
                <el-button type="text" style="margin-top: 10px; color: #646464;">产品总额：¥{{totalPrice}}
                </el-button>
            </el-col>
            <el-col :span="5">
            </el-col>
        </el-row>
    </div>
</div>
</body>
<script type="text/javascript">
        $.get("/cai/shop/getUid",function (backData) {
            $.get("/cai/shop/list/"+backData.data,function (listBackData) {
                app.tableData = listBackData.data;
            });
        });
    window.addEventListener("message", (messageEvent) => {
        app.$data.active = messageEvent.data
    });
    var app = new Vue({
        el:"#app",
        data:{
            active: 0,
            tableData: [],
            totalPrice: 0,
            multipleSelection: [],
            info: {}

        },
        methods:{


            prev() {
                --app.active;
                if (app.active < 0) app.active = 0
            },
            next() {
                if (app.active++ > 2) app.active = 0
            },
            // 删除单个商品
            deleteGoods:function(id){
                if(confirm("您确定删除吗？")){
                    $.get("/cai/shop/deleteOne/"+id,function (backData) {
                        if(backData.code == 1){
                            app.$notify({
                                title: '成功',
                                message: backData.msg,
                                type: 'success'
                            });
                            $.get("/cai/shop/getUid",function (backData) {
                                $.get("/cai/shop/list/"+backData.data,function (listBackData) {
                                    app.tableData = listBackData.data;
                                });
                            });
                            getInfo()
                        }else {
                            app.$notify.error({
                                title: '错误提示',
                                message: backData.msg
                            });
                        }
                    });
                }
            },
            // 数量变化触发
            handleInput(value) {
                console.log(value);
                if (null == value.num || value.num == "" || value.num == 0) {
                    value.num = 1;
                }
                if (typeof addGood.num == 'string') {
                    addGood.num = parseInt(addGood.num);
                };

                value.price = parseFloat(value.num * value.storeGoods.sprice).toFixed(2); //保留两位小数

                //增加商品数量也需要重新计算商品总价
                app.handleSelectionChange(app.multipleSelection);
            },
            add(addGood) {
                //输入框输入值变化时会变为字符串格式返回到js
                //此处要用v-model，实现双向数据绑定
                if (typeof addGood.num == 'string') {
                    addGood.num = parseInt(addGood.num);
                };
                addGood.num += 1;
                addGood.price = (addGood.num * addGood.storeGoods.sprice).toFixed(2); //保留两位小数
                app.handleSelectionChange(app.multipleSelection)
            },
            del(delGood) {
                if (typeof delGood.num == 'string') {
                    delGood.num = parseInt(delGood.num);
                };
                if (delGood.num > 1) {
                    delGood.num -= 1;
                    delGood.price = (delGood.num * delGood.storeGoods.sprice).toFixed(2); //保留两位小数
                    app.handleSelectionChange(app.multipleSelection)
                }
            },
            handleSelectionChange(selection) {
                app.multipleSelection = selection;
                app.totalPrice = 0;
                //此处不支持forEach循环，只能用原始方法了
                for (var i = 0; i < selection.length; i++) {
                    //判断返回的值是否是字符串
                    if (typeof selection[i].price == 'string') {
                        selection[i].price = parseInt(selection[i].price);
                    };
                    app.totalPrice += selection[i].price;
                }
                let data = {
                    "selection":selection,
                    "total":app.totalPrice
                }
                window.parent.postMessage(data,"*");

            }
        },
    })
    getInfo();
</script>
</html>
